<template>
  <div class="gl_contentBox gl_heightFull">
    <el-row :gutter="20" class="gl_mb_15">
      <el-col :md="8" :lg="6">
        <el-button :loading="deleteLoading" type="danger" size="mini" @click="removeMore">{{ $t('button.delete') }}</el-button>
      </el-col>
    </el-row>
    <el-table ref="draftsTable" v-loading="loading" :data="draftsTable" size="mini" @selection-change="selection">
      <el-table-column type="selection" label-class-name="selection" />
      <el-table-column prop="title" :label="$t('table.title')" />
      <el-table-column :label="$t('table.addressee')">
        <template slot-scope="{row}">
          <el-popover placement="top-start" width="500" trigger="hover">
            <span v-for="(item, index) in row.targetUsers" :key="index">
              {{ item.name }}；
            </span>
            <span slot="reference" class="gl_ellipsis">
              <span v-for="(item, index) in row.targetUsers" :key="index">
                {{ item.name }}；
              </span>
            </span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.message')">
        <template slot-scope="scope">
          <span v-html="scope.row.message">
            <!-- {{ scope.row.message }} -->
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.time')">
        <template slot-scope="{row}">
          <span v-if="row.lastModifyDate">
            {{ row.lastModifyDate | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" :label="$t('table.actions')" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="writeMessage(scope.row)">{{ $t('table.edit') }}</el-button>
          <el-button size="mini" type="text" @click="remove(scope.row)">{{ $t('table.delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_DraftQO.Page"
        :page-size="Api_GET_DraftQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <write :is-write="isWrite" :edit="edit" :row-data="rowData" @showWrite="showWrite" />
  </div>
</template>

<script>
import { translateByCode } from '@/lib/getTransData';
import { Api_GET_DraftQO } from '@/lib/form/swaggerForm';
import { api_GET_Draft, api_DELETE_Draft } from '@/extend/api/swaggerApi/chat.js';
import write from './write';
export default {
  name: 'Drafts',
  components: { write }, // 写通知
  data() {
    return {
      loading: false,
      deleteLoading: false,
      Api_GET_DraftQO: new Api_GET_DraftQO(), // 草稿箱查询的表单(分页)
      currentPage: 1, // 当前页
      totalPage: 0, // 总条目数
      isWrite: false, // 是否显示写通知
      edit: true, // 编辑草稿
      draftsTable: [], // 草稿箱表格数据
      rowData: { // 通知详情
        title: '标题',
        readTime: '发送时间',
        // sendUserName: '发送人',
        content: '内容'
      },
      draftsSelection: [] // 选中的数据
    };
  },
  // watch: {
  //   // 监听分页变化，刷新表格数据
  //   Api_GET_DraftQO: {
  //     handler(newval) {
  //       this.refreshList(newval);
  //     },
  //     deep: true
  //   }
  // },
  created() {
    this.refreshList();
  },
  methods: {
    // 获取草稿数据
    refreshList(page) {
      this.loading = true;
      this.Api_GET_DraftQO.Page = page || 1;
      this.Api_GET_DraftQO.SkipCount = (this.Api_GET_DraftQO.Page - 1) * this.Api_GET_DraftQO.MaxResultCount;
      api_GET_Draft(this.Api_GET_DraftQO).then(res => {
        this.draftsTable = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 选中的数据
    selection(val) {
      this.draftsSelection = val;
    },
    // 编辑草稿
    writeMessage(row) {
      this.rowData = row;
      this.isWrite = true;
    },
    showWrite(data) {
      this.isWrite = data;
    },
    // 单个删除
    remove(row) {
      this.$confirm(translateByCode('alert.wantDelete') + `[ ${row.title} ]` + translateByCode('alert.ma'), translateByCode('alert.delete'), {
        confirmButtonText: translateByCode('alert.confirm'),
        cancelButtonText: translateByCode('alert.cancel'),
        type: 'warning'
      }).then(() => {
        const array = [row.id];
        api_DELETE_Draft(array).then(res => {
          this.$message({
            type: 'success',
            message: translateByCode('alert.deleteSuccessfully')
          });
          this.refreshList(this.Api_GET_DraftQO.Page);
        }).catch(() => {});
      }).catch(() => {
        this.$message({
          type: 'info',
          message: translateByCode('alert.cancelDelete')
        });
      });
    },
    // 多个删除
    removeMore() {
      const idList = this.draftsSelection.map(item => {
        return item.id;
      });
      if (this.draftsSelection && this.draftsSelection.length > 0) {
        this.$confirm(translateByCode('alert.removeMore'), translateByCode('alert.delete'), {
          confirmButtonText: translateByCode('alert.confirm'),
          cancelButtonText: translateByCode('alert.cancel'),
          type: 'warning'
        }).then(() => {
          this.deleteLoading = true;
          api_DELETE_Draft(idList).then(res => {
            this.$message({
              type: 'success',
              message: translateByCode('alert.deleteSuccessfully')
            });
            this.deleteLoading = false;
            this.refreshList(this.Api_GET_DraftQO.Page);
          }).catch(() => {
            this.deleteLoading = false;
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: translateByCode('alert.cancelDelete')
          });
        });
      } else {
        this.$message({
          type: 'warning',
          message: translateByCode('alert.unableDelete')
        });
      }
    },
    // 分页变化
    sizeChange: function(MaxResultCount) {
      this.Api_GET_DraftQO.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.refreshList();
    },
    pageIndexChange(currentPage) {
      this.refreshList(currentPage);
    }
  }
};
</script>

<style scoped>
.el-table /deep/ .cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 14px;
}
.el-table /deep/ .cell span img {
  max-width: 28px;
  max-width: 28px;
}
</style>
